import React, { Component } from 'react';
import { List, Radio, Drawer } from 'antd-mobile';
import TempleList from '../templeList/TempleList';
import Province from '../address/Province';
import CityList from '../address/CityList';
import styles from './Header.module.scss';
import Axios from '../../utils/request';
import Store from '../../redux/Store';
import Action from '../../redux/Action';
// import { NavLink, BrowserRouter as Router, Switch, Route } from 'react-router-dom';

// import Province from '../address/Province';

const RadioItem = Radio.RadioItem;
class Header extends Component {
	constructor(props) {
		super(props);
		this.state = {
			// value: 0, //排序方式
			open: false, //抽屉显示隐藏
			all: false, //全部按钮点击控制
			show: Store.getState().show, //显示内容  temple:寺庙  province:省   city:市
			province: {}, //
			sortOrder: Store.getState().sortOrder, //排序方式
			codeNumber: this.getQueryString('code') //授权后获取code
		};
	}
	componentDidMount() {
		if (this.state.codeNumber === null) {
			//授权登录
			Axios({
				method: 'get',
				url: '/wx/wechatLogin'
			}).then((res) => {
				console.log(res);
				window.location.href = res.data.data;  
			});
		} else if (this.state.codeNumber !== null) {
			//向后端传递code
			Axios({
				method: 'post',
				url: '/wx/WechatCallBack',
				data: {
					code: this.state.codeNumber
				}
			}).then((res) => {
				// console.log(res);
			});
		}

		Store.subscribe(this.listener);
		// console.log(Store.getState().show);
		window.addEventListener('scroll', this.onScrollChange);
	}
	onScrollChange = () => {
		let top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
		console.log(top);
	};
	//使用正则获取地址栏参数
	getQueryString(name) {
		var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
		var r = this.props.location.search.substr(1).match(reg);
		if (r != null) return unescape(r[2]);
		return null;
	}

	//接收Store仓库的值
	listener = () => {
		// console.log(Store.getState().show);
		//选择地址后，渲染寺庙列表
		this.setState(
			{
				sortOrder: Store.getState().sortOrder,
				show: Store.getState().show
			},
			() => {
				if (this.state.show === 'temple') {
					this.setState({ all: false });
				}
			}
		);
	};
	//抽屉(智能排序)
	onOpenChange = () => {
		// console.log(e.currentTarget);
		this.setState({ open: !this.state.open }, () => {
			this.setState({ all: false });
		});
	};
	//更改排序方式
	onChange = (value) => {
		console.log(value);
		// this.setState({ sortOrder: value });
		//传入排序方式
		Store.dispatch(Action.sortOrder(value));
		//显示寺庙列表
		Store.dispatch(Action.show('temple'));

		this.setState(
			{
				value
			},
			() => {
				this.setState({ open: !this.state.open });
			}
		);
	};
	//点击左侧'全部'按钮
	handleAll = () => {
		this.setState(
			{
				all: !this.state.all,
				open: false
			},
			() => {
				// this.props.history.push('/header/province');
				Store.dispatch(Action.show('province'));
				// 按钮关闭状态显示寺庙列表
				if (!this.state.all) {
					Store.dispatch(Action.show('temple'));
				}
			}
		);
	};
	//搜索
	handleSearch = () => {
		// console.log(this.props);
		this.props.history.push('/search');
	};
	render() {
		const { open, all, sortOrder, show } = this.state;
		// console.log(all);
		const props = this.props;
		const data = [ { sortOrder: 0, label: '智能排序' }, { sortOrder: 1, label: '离我最近' } ];
		// 单项选择
		const sidebar = (
			<List>
				{data.map((i) => (
					<RadioItem
						key={i.sortOrder}
						checked={sortOrder === i.sortOrder}
						onClick={() => this.onChange(i.sortOrder)}
					>
						<span style={sortOrder === i.sortOrder ? { color: '#BE9567' } : {}}>{i.label}</span>
					</RadioItem>
				))}
			</List>
		);

		return (
			<div>
				<div className={styles.header}>
					<div onClick={this.handleAll} className={`${styles.imgdown} ${all ? styles.active : ''}`}>
						<p>{Store.getState().keyWord.length === 0 ? '全部' : Store.getState().keyWord[1]}</p>
						{/* {area} */}
					</div>
					<div
						onClick={this.onOpenChange}
						className={`${styles.imgdown} ${open ? styles.active : ''}`}
						style={{ backgroundPositionX: '0.93rem' }}
					>
						{sortOrder === 0 ? '智能排序' : '离我最近'}
					</div>
					<div className={styles.imgsearch} onClick={this.handleSearch}>
						搜索
					</div>
				</div>
				{/* 抽屉 */}
				<Drawer
					className="my-drawer"
					style={{ minHeight: document.documentElement.clientHeight - 43 }}
					enableDragHandle
					contentStyle={{ color: '#A6A6A6' }}
					sidebar={sidebar}
					open={this.state.open}
					onOpenChange={this.onOpenChange}
					position={'top'}
				>
					{/* temple:显示寺庙；province:显示省份；citys:显示市 */}
					{show === 'temple' ? (
						<TempleList {...props} />
					) : show === 'province' ? (
						<Province
							//接受子组件（Province）传递的值
							show={(msg) => {
								// console.log(msg);
								// this.setState({ show: msg[0], province: msg[1] });
								this.setState({ province: msg });
							}}
						/>
					) : show === 'city' ? (
						//向子组件（CityList）传值
						<CityList province={this.state.province} />
					) : (
						// <CityList />
						''
					)}
				</Drawer>
			</div>
		);
	}
}

export default Header;
